<template>
  <div>
    <h2 style="font-size: 30px;font-weight: bold;">审批页面</h2>
      <table border style="width: 800px">
        <tr>
        <td style="text-align: right;">姓名：</td>
        <td style="height: 40px;">
          {{ form.userName }}
        </td>
      </tr>
      <tr>
        <td style="width: 150px;text-align: right;">部门：</td>
        <td style="height: 40px;">
          <select v-model="form.sectorid" style="width: 280px;height: 30px;" >
            <option v-for="item in data" :key="item.value" :label="item.label" :value="item.value" />
          </select>
        </td>
      </tr>
      <tr>
        <td style="text-align: right;">请假类型：</td>
        <td>{{ form.leaveType }}</td>
      </tr>
      <tr>
        <td style="text-align: right;">请假时间：</td>
        <td style="width: 400px;height: 110px;">
          <el-date-picker v-model="add.startTime"
            type="datetime" placeholder="开始时间" format="YYYY/MM/DD HH:mm" 
            value-format="YYYY-MM-DD h:m:s a" :readonly="true"/>至
          <el-date-picker v-model="add.endTime"
            type="datetime" placeholder="结束时间" format="YYYY/MM/DD HH:mm"
            value-format="YYYY-MM-DD h:m:s a" :readonly="true"/>&nbsp;<br><br>
          共计<el-input style="width: 50px;" v-model="add.Days" :readonly="true"/>天
          <el-input style="width: 50px;" v-model="add.Hours" :readonly="true"/>时<br><br>

          报到时间：<el-date-picker v-model="form.reportedTime" type="datetime" 
           format="YYYY/MM/DD HH:mm"
            placeholder="报到时间" :readonly="true"/>
        </td>
      </tr>
      <tr>
        <td style="text-align: right;">请假事由：</td>
        <td style="width: 600px;height: 110px;">
          <el-input v-model="form.leaveReason" maxlength="140" style="width: 600px;height: 100px;"
          :autosize="{ minRows: 4, maxRows: 6 }" show-word-limit type="textarea" :readonly="true"/>
        </td>
      </tr>
      <tr>
        <td style="text-align: right;">审批:</td>
        <td style="height: 40px;" align="center">
          <el-radio-group v-model="form.leaveState">
            <el-radio  :value='true' name="type">通过</el-radio>
            <el-radio  :value='false' name="type">不通过</el-radio>
          </el-radio-group>
        </td>
      </tr>
      <tr style="width: 150px;height: 60px;">
        <td></td>
        <td style="text-align: center;">
           <el-button style="width: 150px;height: 40px;font-size: 20px;" type="primary"
           @click="Update1">提交</el-button>
        </td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">
import router from '@/router';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import {  onMounted, reactive} from 'vue';
import { useRoute } from 'vue-router';

onMounted(()=>{
  GetLeaved()
  console.log(add);
  
})
const route=useRoute()
const form = reactive({
  leaveId:route.query.leaveId,
  userName: '',
  sectorid:'1',
  leaveTime:'',
  reportedTime:'',
  leaveState:'',
  leaveReason:'',
  leaveType:'',
  totaWorkTime:''
})
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const add:any=reactive({
  Days:'',
  Hours:'',
  startTime:'',
  endTime:''
})
//部门
const data = [{
    value: '1',
    label: 'IT信息部',
  },
  {
    value: '2',
    label: '人力资源部',
  },
  {
    value: '3',
    label: '财务部',
  }]
//反填
const GetLeaved=()=>{
  axios.get('Leave/GetLeaved', {
    params: {
      id:form.leaveId
    }
  }).then((ret) => {
    console.log(ret.data)
    form.userName=ret.data.userName
    form.leaveType=ret.data.leaveType
    add.startTime=ret.data.leaveTime.substring(0,19)
    add.endTime=ret.data.leaveTime.substring(20,40)
    add.Hours=ret.data.totaWorkTime%8
    add.Days=Math.floor(ret.data.totaWorkTime/8)
    form.reportedTime=ret.data.reportedTime
    form.leaveReason=ret.data.leaveReason
  })
}
const Update1=()=>{
  form.leaveTime=add.startTime+'-'+add.endTime
  form.totaWorkTime=(add.Days*24/3)+add.Hours
  axios.post(`Leave/VettingLeave`,form).then((ret) => {
    console.log(ret.data)
    console.log(ret.data)
    if(ret.data>0){
      ElMessage.success('修改成功')
      router.push('/ExcusedList')
      return
    }else{
      ElMessage.error('修改失败')
    }
  })
}
</script>

<style scoped>

</style>